<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <meta name="viewport"
        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="http://www.popochiu.com/js/qrcode.min.js"></script>
       
</head>
<body>
    <style>
        .el-select .el-input {
          width: 150px;
        }
        .input-with-select .el-input-group__prepend {
          background-color: #fff;
        }
        .el-main{
          min-height: calc(100vh - 72px);
        }

        .cell{
          display: flex; 
        }

        .cell img{
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-left: 5px; 
        }
 
        .backdrop{
          position: fixed;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          background: rgba(0,0,0 , 0.5);
          z-index: 99999; 
        }

        .backdrop img{
          position: fixed;
          left: 50%;
          top: 50%;  
          transform: translate(-50%, -50%)
        }
       
      </style>
  <div id="app">
    <div class="backdrop" v-if="showbackdrop" @click.stop="closeBackdrop">
      <img id="qrcode" :src="backdropimg">
    </div>
      <el-input placeholder="Please input" v-model="token" @keyup.enter.native="validToken"  v-if="!valid">
          <template slot="append"> 
             <el-button slot="append" icon="el-icon-search" @click="validToken"  >验证</el-button>
            </template>
        </el-input>
      <el-container style="height: 500px; border: 1px solid #eee" v-if="valid"> 
          <el-container>
            <el-header style="text-align: right; font-size: 12px">

                <el-input placeholder="Please input" v-model="keyword"  @keyup.enter.native="getFiles" class="input-with-select" >
                    <el-select v-model="select" slot="prepend" placeholder="Select">
                      <el-option label="按时间降" value="UNIX_TIMESTAMP(createTime)-desc"></el-option>
                      <el-option label="按时间升 " value="UNIX_TIMESTAMP(createTime)-asc"></el-option>
                      <el-option label="文件大小升" value="fileSize-asc"></el-option>
                      <el-option label="文件大小降"value="fileSize-desc"></el-option>
 
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="getFiles" >搜索</el-button>
                  </el-input>  
            </el-header>
            
            <el-main>
              <el-table :data="tableData" v-loading="loading">
                <el-table-column prop="createTime" label="createTime" width="140" onmouseover="mouse">
                </el-table-column>
                <el-table-column prop="filename" label="filename">
                </el-table-column>
                <el-table-column prop="fullpath" label="fullpath">
                </el-table-column>
                <el-table-column prop="fileSize" label="fileSize"  width="120">
                  </el-table-column>
                  <el-table-column prop="handle" label="handle"> 
                      <template slot-scope="scope">
                    <el-button type="primary" icon=" el-icon-view" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                   
                    <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
 
                    
                    <img id="qrimage" @click="mouse($event,scope.row)"  src="">
                  
                  </template>
                    </el-table-column>
              </el-table>

              <div class="block"> 
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[pageSize * 1, pageSize * 2, pageSize * 3, pageSize * 4]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
            </el-main>
          </el-container>
        </el-container>
         
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>

//   const axios = new Axios();
  const baseURL = location.host != "localhost:3000" ? 'http://www.popochiu.com/' : 'http://localhost:3000/' 
  
    new Vue({
      el: '#app',
      data: function() {
        return { 
          instance: null,
          keyword: '',
          valid: false,
          token: 0,
          select: 'UNIX_TIMESTAMP(createTime)-desc',
          visible: false,
          tableData:  [],
          currentPage: 1,
          loading: false,
          showbackdrop : false,
          backdropimg: '',
          pageSize: 20,
          total: 0
        }
      },
      methods: {
        mouse($event, row){
          console.log($event, row) 
         
          this.showbackdrop = true
 

          QRCode.toDataURL(row.fullpath)
          .then(url => {
            console.log(url)
              this.backdropimg = url
          })
          .catch(err => {
            console.error(err)
          })
        },
        closeBackdrop(){ 
          this.showbackdrop = false
        },
        validToken(){
          this.instance = axios.create({
            baseURL: baseURL,
            timeout: 20000,
            headers: {'token': this.token}
          });
          this.getFiles()
        },
        getFiles(){   
          if(!this.token){
            return
          }
          this.loading = true
          const queryCondi = {
            "orders": [],
            "filters": [],
            "currentPage":this.currentPage ,
            "pageSize": this.pageSize
          } 
          queryCondi.orders.push(
            {"orderby": this.select.split('-').pop(),
            "key":this.select.split('-')[0],
            "priority":2}
          ) 
          queryCondi.filters.push(
            {"key":"filename",
            "value":this.keyword}
          )
            this.instance.post('file/getFiles', queryCondi)
                .then( response => {
                    // handle success

                    if(this.token){
                      localStorage.setItem('token', this.token) 
                    }
                    console.log(response);
                    this.valid = true

                    if(Array.isArray(response.data.data)){
                      this.tableData = response.data.data
                      this.total = response.data.total
                    }else{
                      
                      this.tableData.push({
                        createTime: new Date().toDateString(),
                        fullpath: 'http://www.popochiu.com'
                      })
                    }
                    this.loading = false
                })
                .catch(function (error) {
                    // handle error
                    this.loading = false
                    console.log(error);
                })
                .finally(function () {
                  this.loading = false
                });
        },
        handleEdit(index, row) {
          window.open(row.fullpath)
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
          if(!row.id)return
          this.instance.post('file/removeFileById', {
            id: row.id
          })
                .then( response => { 
                  this.tableData.splice(index, 1)
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .finally(function () {
                    // always executed
                });
        }, 
        handleSizeChange(val) {
          console.log(`${val} items per page`);
          this.pageSize = val
        },
        handleCurrentChange(val) {
          console.log(`current page: ${val}`);
          this.currentPage = val
          this.getFiles()
        }
      },
      mounted() {
        let token = localStorage.getItem('token') 
        this.token = token
        this.instance = axios.create({
          baseURL: baseURL,
          timeout: 20000,
          headers: {'token': this.token}
        });
        
          this.getFiles()
      },
    })
  </script>
</html>